<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="已处理" name="first">
            <el-row>
                <el-col :span="14">
                    <el-button type="text" @click="dialogVisible = true">申请辞职</el-button>
                </el-col>

                <!-- v-for循环显示出多个卡片，v-if根据数据类型判断是数据卡片还是开关拉片 -->
                <el-col :span="14" v-for="i in quitList" :key="i.id" style="margin-top: 12px">
                    <!-- 开关卡片 -->
                    <el-card class="box-card">
                        <h1>辞职申请</h1>

                        <p>员工号：{{i.eid}}</p>
                        <p>姓名：{{i.ename}}</p>
                        <p>辞职原因：{{i.quitReason}}
                        </p>
<!--                        <el-button type="danger" @click="deleteMood(i.id)" style="margin-left: 520px">删除</el-button>-->
                        <el-divider content-position="right">{{i.remarks}}</el-divider>
                    </el-card>

                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="未处理" name="second">

        </el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        name: "Quit",
        data() {
            return {
                activeName: 'second',
                quitList: [
                    {
                        eid: undefined,
                        eName: undefined,
                        quitDate: undefined,
                        quitStatus: undefined,
                        remarks: undefined,
                        quitReason: undefined
                    }
                ],
            };
        },
        created() {
            this.getQuitList()
        },
        methods: {
            getQuitList() {
                this.$axios.get("/sys/emsQuit/search/1/6").then((response) => {
                    console.log(response)
                    this.quitList = response.data.data.list
                })
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    }
</script>

<style scoped>

</style>